<!DOCTYPE html>
<html>

<head>
    <title>健康自测</title>
    <!--必须放在libs前面-->
    <link rel="stylesheet" href="/quickJs/scripts/mui/css/mui.min.css">
    <script type="text/javascript" src="/quickJs/scripts/mui/js/mui.min.js"></script>
    <%- include('../../_global/baseLibs') %>
    <link rel="stylesheet" href="/static/css/mycontract.css" />
    <script type="text/javascript" src="/static/lib/util.js"></script>
    <style type="text/css">
        .background_head {
            width: 100%;
            margin-bottom: 10px;
        }

        .topBar {
            width: 100%;
            height: 40px;
            background: #fff;
            border-bottom: 1px solid #eee;
        }

        .topBar .text {
            width: 90%;
            margin: auto;
            padding-top: 10px;
        }

        .topBar .text .title {
            font-size: 14px;
            font-weight: 400;
            color: #333;
        }

        .topBar .text img {
            float: right;
            height: 15px;
            margin-top: 2px;
        }

        .testHis {
            width: 100%;
            background: #fff;
        }

        .testHis .text {
            width: 90%;
            margin: auto;
            padding-top: 3px;
        }

        .testHis .text .cell {
            display: inline-block;
            width: 30%;
        }

        .testHis .text .center {
            text-align: right;
            display: inline-block;
            width: 25%;
        }

        .testHis .text .center img {
            height: 10px;
        }

        .testHis .text .right {
            text-align: right;
            display: inline-block;
            width: 40%;
        }

        .title {
            font-size: 12px;
            font-weight: 400;
            color: #8f8f94;
        }

        .ulDiv {
            width: 90%;
            margin: auto;
            background: #fff;
        }

        .ulDiv ul {
            padding-left: 0px;
            margin-top: 0px;
        }

        .ulDiv ul li {
            display: inline-block;
            width: 33%;
        }

        .ulDiv ul .right {
            text-align: right;
            float: right;
            padding-top: 6px;
        }

        .body {
            width: 100%;
            height: 240px;
            background: #fff;
        }

        .body .box {
            border-bottom: 1px solid #eee;
            height: 80px;
        }

        .body .box .cell {
            width: 49%;
            height: 100%;
            display: inline-block;
        }

        .body .box .cell .text {
            font-size: 14px;
            font-weight: 400;
            color: #333;
            position: absolute;
            padding-left: 5%;
            padding-top: 20px;
        }

        .body .box .cell .display {
            font-size: 12px;
            font-weight: 400;
            color: #8f8f94;
            position: absolute;
            padding-left: 5%;
            padding-top: 46px;
        }

        .body .box .left {
            border-right: 1px solid #eee;
        }

        .body .box img {
            width: 50px;
            float: right;
            margin-top: 16px;
            margin-right: 5%;
        }
    </style>
</head>

<body>
    <header id="header" class="mui-bar mui-bar-nav header-box" style="height: 44px;">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href="javascript:void(0);"></a>
        <h1 class="mui-title">体征测量</h1>
    </header>
    <div class="mui-content" style="padding-top: 0px;">

        <!-- 头部导航栏开始 -->
        <div class="background_head" id="background_head"></div>
        <!-- 头部结束 -->

        <!-- 中心区域开始 -->
        <div class="body">
            <div class="box">
                <div class="cell left" title="测血糖" uri="suger_mobile">
                    <span class="text">测血糖</span>
                    <span class="display">保持血糖稳定</span>
                    <img alt="" src="/static/images/measurement/selfTest/xuetang.png">
                </div>
                <div class="cell right" title="测血压" uri="pressure_mobile">
                    <span class="text">测血压</span>
                    <span class="display">平稳控制血压</span>
                    <img alt="" src="/static/images/measurement/selfTest/xueya.png">
                </div>
            </div>
            <div class="box">
                <div class="cell left" title="测血氧" uri="oxygen_mobile">
                    <span class="text">测血氧</span>
                    <span class="display">血氧指标需重视</span>
                    <img alt="" src="/static/images/measurement/selfTest/xueyang.png">
                </div>
                <div class="cell right" title="测BMI" uri="BMI_mobile">
                    <span class="text">BMI</span>
                    <span class="display">BMI超标要谨慎</span>
                    <img alt="" src="/static/images/measurement/selfTest/BMI.png">
                </div>
            </div>
            <div class="box">
                <div class="cell left" title="测腰臀比" uri="WHR_mobile">
                    <span class="text">腰臀比</span>
                    <span class="display">谨记腰围别超标</span>
                    <img alt="" src="/static/images/measurement/selfTest/yaotunbi.png">
                </div>
            </div>
        </div>
    </div>

    <!--footer-->
    <%- include('../common/footer') %>
<script type="text/javascript">


    /*血糖*/
    function handler01(){
        var item = $($("#xt").html());
        item.data('data', this);
        var sjd = this['sjd'];
        var dict = $.JkcsZydmUtils.getDict({
            tableName: "tzcl_sjd"
            ,keyValue: false
        });
        var sjd_text = dict[sjd] + '血糖';
        item.find('.cell span').text(sjd_text);
        var value = this['xt'];
        item.find('.center span').text(value+'mmol/L');
        if(sjd == '0' || sjd == '2' || sjd == '4' || sjd == '6' || sjd == '7'){
            if (value < 4.4) {
                var down = getImgDown();
                item.find('.center span').after(down);
            }
            if (value > 10) {
                var up = getImgUp();
                item.find('.center span').after(up);
            }
        }
        var clsj = this['clsj'];
        item.find('.right p').text(clsj);
        return item;
    }
    /*血压*/
    function handler02(){
        var item = $($("#xy").html());
        item.data('data', this);
        var sjd = this['sjd'];
        var dict = $.JkcsZydmUtils.getDict({
            tableName: "tzcl_sjd"
            ,keyValue: false
        });
        var sjd_text = dict[sjd] + '血压';
        item.find('.cell span').text(sjd_text);
        var ssy = this['ssy'];
        var szy = this['szy'];
        item.find('.center span').text(ssy + '/' + szy +'mmHg');
        if(ssy < 90 && szy < 60){
            var down = getImgDown();
            item.find('.center span').after(down);
        }
        if(ssy > 140 && szy > 90){
            var up = getImgUp();
            item.find('.center span').after(up);
        }
        var clsj = this['clsj'];
        item.find('.right p').text(clsj);
        /*心率*/
        var item_xl = $($("#xl").html());
        item_xl.data('data', this);
        var sjd = this['sjd'];
        var sjd_text = dict[sjd] + '心率';
        item_xl.find('.cell span').text(sjd_text);
        var value_xl = this['xl'];
        item_xl.find('.center span').text(value_xl +'次/分钟');
        if(value_xl < 60){
            var down = getImgDown();
            item_xl.find('.center span').after(down);
        }
        if(value_xl > 100){
            var up = getImgUp();
            item_xl.find('.center span').after(up);
        }
        var clsj = this['clsj'];
        item_xl.find('.right p').text(clsj);
        return [item, item_xl];
    }
    /*血氧*/
    function handler03(){
        var item = $($("#oxygen").html());
        item.data('data', this);
        var sjd_text = '血氧';
        item.find('.cell span').text(sjd_text);
        var value = this['xy'];
        item.find('.center span').text(value +'%');
        if(value < 95){
            var down = getImgDown();
            item.find('.center span').after(down);
        }
        var clsj = this['clsj'];
        item.find('.right p').text(clsj);
        return item;
    }
    /*BMI*/
    function handler04(){
        var item = $($("#bmi").html());
        item.data('data', this);
        var sjd_text = 'BMI指数';
        item.find('.cell span').text(sjd_text);
        var sg = this['sg'];
        var tz = this['tz'];
        var bmifl = tz / ((sg / 100.0) * (sg / 100.0));
        var bmi = bmifl.toFixed(1);
        item.find('.center span').text(bmi);
        if(bmi<18.5){
            var down = getImgDown();
            item.find('.center span').after(down);
        }
        if(bmi>23.9){
            var up = getImgUp();
            item.find('.center span').after(up);
        }
        var clsj = this['clsj'];
        item.find('.right p').text(clsj);
        return item;
    }
    /*腰臀比*/
    function handler05(){
        var item = $($("#bmi").html());
        item.data('data', this);
        var sjd_text = '腰臀比';
        item.find('.cell span').text(sjd_text);
        var yw = this['yw'];
        var tw = this['tw'];
        var whrfl = yw / tw;
        var whr = whrfl.toFixed(2);
        item.find('.center span').text(whr);
        if(whr>0.9){
            var up = getImgUp();
            item.find('.center span').after(up);
        }
        var clsj = this['clsj'];
        item.find('.right p').text(clsj);
        return item;
    }

    function getImgUp(){
        return $($("#img_up").html());
    }

    function getImgDown(){
        return $($("#img_down").html());
    }



    var page_selfTestMobile = (function($, page_selfTestMobile) {

        /*自测跳转基本路径*/
        var url_base = "/html/gzd/measurement";
        var uri_service_querylimit = '/api/gzd/tzcl/queryLimit';
        /*详细记录页面*/
        var url_tzcl_record = '/html/gzd/measurement/records_mobile.html';


        /*模块点击回调*/
        function cellClickHandler(){
            var title = $(this).attr("title");
            var uri = $(this).attr("uri");
            $.pageSwitch.goToUrl("measurement",uri);
        }

        function querylimitHandler(result){
            if($.isArray(result) || result.length > 0){
                var jqcl = $($("#jqcl").html());
                jqcl.on('click', function(){
                    $.pageSwitch.goToUrl("measurement","records_mobile");
                });
                $("#background_head").append(jqcl);
                $.each(result, function(index, item){
                    var cllx = item['cllx'];
                    var func = eval('handler' + cllx);
                    if($.isFunction(func)){
                        var item = func.apply(this);
                        $("#background_head").append(item);
                    }
                })
            }
        }


        var cfg_def = {
            cellClickHandler: cellClickHandler,
            querylimitHandler: querylimitHandler,
        }

        page_selfTestMobile.init = function(cfg){
            $.extend(page_selfTestMobile, cfg_def, cfg);
            $(".cell").on('click', page_selfTestMobile.cellClickHandler);
            $.QuickRemote.AjaxJson({
                funcName: uri_service_querylimit
                ,callback: page_selfTestMobile.querylimitHandler
            });
        }

        return page_selfTestMobile;
    })(jQuery, {});



</script>

</body>
<script type="text/html" id="jqcl">
    <div class="topBar">
        <div class="text">
            <img alt="" src="/static/images/back.png" />
            <span class="title">近期测量</span>
        </div>
    </div>
</script>
<script type="text/html" id="xt">
    <div class="testHis">
        <div class="text">
            <div class="cell">
                <span class="title"></span>
            </div>
            <div class="center">
                <span class="title"></span>
            </div>
            <div class="right">
                <p class="title"></p>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="xl">
    <div class="testHis">
        <div class="text">
            <div class="cell">
                <span class="title"></span>
            </div>
            <div class="center">
                <span class="title"></span>
            </div>
            <div class="right">
                <p class="title"></p>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="xy">
    <div class="testHis">
        <div class="text">
            <div class="cell">
                <span class="title"></span>
            </div>
            <div class="center">
                <span class="title"></span>
            </div>
            <div class="right">
                <p class="title"></p>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="bmi">
    <div class="testHis">
        <div class="text">
            <div class="cell">
                <span class="title"></span>
            </div>
            <div class="center">
                <span class="title"></span>
            </div>
            <div class="right">
                <p class="title"></p>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="oxygen">
    <div class="testHis">
        <div class="text">
            <div class="cell">
                <span class="title"></span>
            </div>
            <div class="center">
                <span class="title"></span>
            </div>
            <div class="right">
                <p class="title"></p>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="whr">
    <div class="testHis">
        <div class="text">
            <div class="cell">
                <span class="title"></span>
            </div>
            <div class="center">
                <span class="title"></span>
            </div>
            <div class="right">
                <p class="title"></p>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="img_up">
    <img src="/static/images/measurement/selfTest/up.png" />
</script>
<script type="text/html" id="img_down">
    <img src="/static/images/measurement/selfTest/down.png" />
</script>
</html>